<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./xiao.css">
    <style>
       /* .left-t ul{
         transform: ;
        } */
    </style>
</head>
<body>

    <div class="contain">
        <div class="left-t">
            <ul>
                <li class="az">
                    <img src="./images/t1.png" alt="">
                </li>
                <li>
                    <img src="./images/t3.png" alt="">
                </li>
                <li>
                    <img src="./images/t4.png" alt="">
                </li>
                <li>
                    <img src="./images/t5.png" alt="">
                </li>
                <li>
                    <img src="./images/t6.png" alt="">
                </li>
            </ul>
        </div>
        <div class="right-l">
            <ul>
                <li class="ad">
                    <img src="./images/t1.png" alt="">
                </li>
                <li>
                    <img src="./images/t3.png" alt="">
                </li>
                <li>
                    <img src="./images/t4.png" alt="">
                </li>
                <li>
                    <img src="./images/t5.png" alt="">
                </li>
                <li>
                    <img src="./images/t6.png" alt="">
                </li>
            </ul>
        </div>
    </div>
    <script src="./js/jquery-3.5.1.js"></script>
   
    <!-- <script>

        var lis =document.querySelectorAll(".right-l ul li");
        var imgs = document.querySelector(".left-t ul")
        console.log()
        for(var i =0 ;i<lis.length;i++){
            //   var e ;
             lis[i].index = i ;
                
            lis[i].onclick=function(){
                
                console.log(this.index);
                for(var q =0 ;q<lis.length;q++){
                    lis[q].classList.remove("ad");

                }
                    var Top = -((this.index)*(622));

                    console.log( String(Top) );

                    imgs.style.transform = "translateY("+ String(Top) +"px)";
                 
                var top = -((this.index)*(90+35));

                this.classList.add("ad");
                // this.parentNode.style.transform = "translateY("+ String(top) +"px)";
            }
        }
    </script> -->

    <script>
        $(function(){
            $(".right-l ul li").click(function(){
                $(this).addClass("ad").siblings().removeClass("ad");
               
                var Top = $(this).index()*-(622);
                $(".left-t ul").css("transform","translateY("+ String(Top) +"px)")
            })
           
        })
    </script>
</body>
</html>